<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 200px auto;
            background-color: skyblue;
            /* 添加绑定动画 */
            /* animation: move 2s linear 3 2s; */
            animation: move2 3s linear infinite;
            /* Google safari兼容 */
            -webkit-animation: move2 3s linear infinite;
        }
        /* 定义动画 过程 */
        @keyframes move {
            /* 从头开始 做好保持跟默认样式的状态一直 */
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(150px);
            }
        }
        /* 百分比定义动画细节 */
        @keyframes move2 {
            0% {
                transform: translateY(0);
            }
            25% {
                transform: translateY(150px);
            }
            50% {
                transform: translateY(0);
            }
            75% {
                transform: translateY(-150px);
            }
            100% {
                transform: translateY(0);
            }
        }

    </style>
</head>
<body>
    <!-- 
        @keyframes 规则
        用于创建动画
        在@keyframes中规定某项css样式 就能创建由从一种样式逐渐变化为另一种样式的效果
        可以改变任意多的样式任意多的次数
        需要使用百分比来规定变化发生的时间 或者用关键词 from to 等同于0%和100%
        0%开始  100%结束

        @keyframes 动画名称 {
            动画过程，可以添加任意百分比处的动画细节
        }

        animation属性 需要将@keyframes中创建的动画捆绑到某个选择器 否则不会产生动画效果
        animation属性用于对动画进行捆绑

        选择器 {
            animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;
        }
        其中必须设置动画名称和过渡时间 其他属性可以根据需求设置

        animation-name  规定@keyframes 动画的名称
        animation-duration  规定动画完成一个周期所花费的秒或者毫秒 默认为0
        animation-timing-function  规定动画的速度曲线 默认为ease
        animation-delay  规定动画合适开始 默认为0
        animation-iteration-count  规定动画播放的次数 默认为1 infinite表示无限循环
    -->
    
    <div class="box"></div>
</body>
</html>